<template>
  <view class="container">
    <sc-navbar back title="上传素材"></sc-navbar>
    <glo-gutter>
      <glo-chunk v-if="false">
        <sc-flex ai="center" col-gap="15">
          <glo-title title="特写素材"></glo-title>
          <sc-text color="#1677FF" size="15" text="上传素材" @click="handleShowExample"></sc-text>
        </sc-flex>
        <sc-text text="上传骨钉层&骨板(棒)图片确保清晰,确保清晰，信息完整，最多上传9张" size="19" color="#767676"></sc-text>
        <sc-view mt="10">
          <glo-upload :maxCount="9"></glo-upload>
        </sc-view>
      </glo-chunk>
      <glo-chunk>
        <sc-flex ai="center" col-gap="15">
          <glo-title title="素材图片"></glo-title>
          <sc-text color="#1677FF" size="15" text="上传素材" @click="handleShowExample"></sc-text>
        </sc-flex>
        <sc-text text="上传骨钉层&骨板(棒)图片确保清晰,确保清晰，信息完整，最多上传9张" size="19" color="#767676"></sc-text>
        <sc-grid mt="10" col="4" row-gap="22" col-gap="22">
          <view class="level-wrap assist" v-for="value in 10" :key="value"> </view>
          <view class="level-wrap main"> </view>
          <!-- <glo-upload :maxCount="9" ></glo-upload> -->
        </sc-grid>
      </glo-chunk>
    </glo-gutter>
    <sc-footer height="150" col-gap="45">
      <sc-button type="grey-red" width="262" height="75" text="批量删除"></sc-button>
      <sc-button type="primary" width="262" height="75" text="提交"></sc-button>
    </sc-footer>
    <up-popup v-model:show="showExamplePopup" mode="bottom" round="0">
      <view class="example-popup-content">
        <sc-flex ai="center" col-gap="23">
          <sc-image src="/static/imgs/example1.png" width="150" height="150"></sc-image>
          <sc-flex direction="t" row-gap="15">
            <glo-title title="正确示范"></glo-title>
            <sc-view width="433">
              <sc-text text="上传四角完整、亮度均匀、照片清晰的素材能极大提高识别通过率~" size="26" color="#767676"></sc-text>
            </sc-view>
          </sc-flex>
        </sc-flex>
        <sc-flex ai="center" col-gap="75" mt="35">
          <sc-flex direction="t" ai="center">
            <sc-image src="/static/imgs/example2.png" width="166" height="112"></sc-image>
            <sc-text text="图片模糊" size="27" color="#767676"></sc-text>
          </sc-flex>
          <sc-flex direction="t" ai="center">
            <sc-image src="/static/imgs/example2.png" width="166" height="112"></sc-image>
            <sc-text text="图片模糊" size="27" color="#767676"></sc-text>
          </sc-flex>
          <sc-flex direction="t" ai="center">
            <sc-image src="/static/imgs/example2.png" width="166" height="112"></sc-image>
            <sc-text text="图片模糊" size="27" color="#767676"></sc-text>
          </sc-flex>
        </sc-flex>
      </view>
    </up-popup>
  </view>
</template>
<script setup>
const showExamplePopup = ref(false);
const handleShowExample = () => {
  showExamplePopup.value = true;
}
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.level-wrap {
  position: relative;
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #E7F1FF;

  &::before {
    content: '主图';
    font-size: 23rpx;
    padding: 5rpx 0 0 15rpx;
    position: absolute;
    top: 0;
    left: 0;
    width: 90rpx;
    height: 67rpx;
    background-size: 90rpx 67rpx;
    background-repeat: no-repeat;
  }

  &.main {
    &::before {
      color: #fff;
      background-image: url('data: image/png;base64, iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAYAAADPRbkKAAACF0lEQVR4AdSYP4tTQRTFzx1EFFexSUpBS8HWD2BlYWltaSOCjbtgYSVoYuIfLAQFC9HKD7DYaiG4H0AWFEVFIW+z8eH+zdt5d8+EzTKzSbG7kPDu4x7uDGTmnd/MDfPec7VZ7dXmNK/P6X9qpT6ra8zrh9Am5ykoz7E6YXXrt/XazE2tORGcFuAUgBnqBATHmY8dQkc5zxHKcezEQhV+y+NK56G8Xnkm2URvNhEKwbvllnwazm0OQEu8HZoP2RQAy0d9jo/B+FCmAMThZ++F5EPzIZsCQImvwXQsUwAKLMXmQ9saQC+YjmUKgMbXqCRMAYjANgCXfp1KwtQOqMA4gGIjWX52TO2As74DXHDbJVRaLyG+q6xyF5Iw9R9Agd+Je3bMAPA56G+3jUV6TsIMABSvACEHkusAAMm4qXbo+k/foT3uphYAVr3H1fyBjDyJBqBKA/AV8ptXXIpf4oPpWJUDoGl6xgLL5lZW4EK3KZ9jw3vbYwE4SYe6zx9f5mzn+5s4Ow1tFThD0yezhlyknuKxjJy89JTECABPu5dZiXNZU+50GvKeK/Dl3xP5MQ0tP5Jf+zEdEyQA3LZ7S025jpaMnHjxoCq1dwFofj5r4G6VzO3HywCA9V70PW5gzEGBil8DAHp8k7fkO7O5GACUHs/NOd8x7Fj7i922LOz0zSUHxbw515FhVzp8iPrmmo7f282WT1jtbQAAAP //MkQjnwAAAAZJREFUAwDPV3r7DgAX4wAAAABJRU5ErkJggg==');
    }
  }

  &.assist {
    &::before {
      color: #ccc;
      background-image: url('data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAYAAADPRbkKAAABh0lEQVR4AeyYyUrEQBRF4+yP+F3O/pYrFXThRkRwqbhRFERUcOFCwWkjju3suaFSJOn0CEnXg4Z3+lXSldS9laoKlcEoiiZhCqYdM+RumOW6OZiHhZKR5gnaGJeBMQqjMOIYJnfDENfpfgPkMuOXm2/BBdTUINlUXKL2DuKwaEA9H4vXjzUDf4i+BR/WDLyg/BN8WDPw5JW7gjUDNafbJ2sGPrxyV7Bm4Nvp9qlvwHdFNQXzT+An30/9IZTvkZKPzT8B8wbMT2LzBl7zc8zSKvSG+EfIhCUD5xnl7qADA+6K3iQNneOipi0Y+EL4NmQ2MhzHEboBbWA2UHoPhRGiAX02eUDtHqyByqTiaGTgnepHsAmrsFwRS7SzCOtwAnVvXs5losjAGTVWYB+uQUuXNtNVoMnaUjSafOQNHPLPDtS98TgXZKQNXKHwAExFYkATZ9eUcic2MaDPdc/unKmUGDg1pTolVga0yjRda1P1gyvKgCZvcMLaFSQDN+1WDrGeDJgdPurQfwAAAP //1zaLVAAAAAZJREFUAwC2pXtU8QXQcwAAAABJRU5ErkJggg==');
    }
  }
}

.example-popup-content {
  padding: 38rpx 50rpx 75rpx 50rpx;
}
</style>
